<template>
	<view>
		<u-navbar title="群光广场" :is-back="false" :title-size="30"></u-navbar>
		<!-- 头部区域 -->
		<view class="headBox">
			<view v-if="swiper.length > 0">
				<u-swiper :list="swiper" name='thumb' :height="400" indicator-pos="topRight"></u-swiper>
			</view>
			<view class="navBox" :class="swiper.length>0?'swiper':''" v-if="navList.length > 0">
				<view class="navItems" v-for="(item,index) in navList" :key="index" @click="toPage(item)">
					<view style="padding: 20upx 0;display: flex;flex-direction: column;justify-content: center;text-align: center;">
						<text class="navName">{{item.title}}</text>
						<view style="font-size: 20upx;margin: 5upx 0;">GO TO CONTROLS <u-icon
								name="arrow-right"></u-icon> </view>
					</view>
					<u-icon :name="this.getImgUrl(item.thumb)" :size="120"></u-icon>
				</view>
			</view>

			<view>
				<view v-if="vuex_isLogin" class="my-info" :class="{
				    'info': swiper.length > 0,
				    'two': navList.length === 0 && swiper.length > 0
				  }">
					<view class="headImg">
						<image :src="headImg"></image>
					</view>
					<view class="userinfo"
						@click="toUrl('pages/packageA/pages/user/user-vip-info-edit/user-vip-info-edit')">
						<view style="font-weight: bold;font-size: 35upx;">{{shortenText(userinfo.member_name)}}</view>
						<view>{{userinfo.level_name}}</view>
					</view>
					<view class="storeinfo">
						<view class="storeItem" @click="toUrl('pages/packageC/pages/credit/cshop-index/cshop-index')">
							<view class="itemnum">{{shortenText(userinfo.credit)}}</view>
							<view>积分</view>
						</view>
						<view class="storeItem" @click="toUrl('pages/packageC/pages/coupon/user-coupon/user-coupon')">
							<view class="itemnum">{{shortenText(0)}}</view>
							<view>优惠券</view>
						</view>
						<view class="storeItem"
							@click="toUrl('pages/packageB/pages/creditcard/user-creditcard/user-creditcard')">
							<view class="itemnum">{{shortenText(0)}}</view>
							<view>购物卡</view>
						</view>
					</view>
					<view class="memberinfo" @click="$u.route('/pages/user/membercode')">
						<view style="line-height: 47upx;">
							<u-icon name="grid" :size="45"></u-icon>
							<view>会员码</view>
						</view>
					</view>
				</view>
				<view v-else @click="userInfo" class="my-info" :class="{
					'isLogin': vuex_isLogin,
				    'info': swiper.length > 0,
				    'two': navList.length === 0 && swiper.length > 0
				  }">
					<view class="headImg">
						<image :src="headImg"></image>
					</view>

					<view class="headName">
						<view class="headLogn" @click="toLogo">注册/登录</view>
						<view style="text-align: left;">登录后查看更多精彩</view>
					</view>
				</view>

			</view>


			<!-- 功能区域 -->
			<view class="funBox" v-if="thirdpartyList.length > 0">
				<view style="padding: 20upx;margin: 0 10upx;font-size: 28upx;">更多服务</view>
				<u-grid :col="3" :border="true" class="custom-grid">
					<u-grid-item v-for="(item, index)  in thirdpartyList" :key="index" @click="feature(item)">
						<u-icon :name="getImgUrl(item.thumb)" :size="90"></u-icon>
						<view class="grid-text">{{ item.title }}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="mineBox" v-if="activity.length > 0">
				<view class="leftBox">
					<view class="upperLeft" @click="onlineToMBUrl(magicLeftTop)">
						<image :src="getImgUrl(magicLeftTop.thumb)"></image>
					</view>
					<view class="leftLower" @click="onlineToMBUrl(magicLeftBottom)">
						<image v-if="magicLeftBottom" :src="getImgUrl(magicLeftBottom.thumb)"></image>
					</view>
				</view>
				<view class="rightBox">
					<swiper class="imgSwiper" :autoplay="true" :interval="3000" :circular="true" :indicator-dots="true"
						:touchable="false">
						<swiper-item class="imgSwiperItem" v-for="(item,index) in slicedDataList"
							@click="onlineEvents(item)" :key="index">
							<view class="imgs" v-if="item.thumb"
								:style="{ backgroundImage: 'url(' + getImgUrl(item.thumb) + ')'}"></view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="contentBox" v-for="(item,index) in activityList" :key="index">
			<view class="cardBox" :style="{ backgroundImage: 'url(' + getImgUrl(item.thumb) + ')'}"
				@click="detail(item)">
			</view>
		</view>
		<u-privacy ref="privacyComponent" position="center"></u-privacy>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				swiper: {},
				userinfo: {
					credit: '0',
					member_name: '无',
					level_name: '无',
				},
				rightImg: {},
				leftImg: {},
				activityList: [],
				showLike: true, // 控制显示点赞数或浏览数
				navList: [],

				thirdpartyList: [],
				activity: [],
				queryInfo: {
					page: 1,
					pageSize: 10,
					totalCount: 0
				},
				magicLeftTop: {},
				magicLeftBottom: {},
				customGridStyle: {
					borderRadius: '20upx',
				},
				member: {},
				headImg: ''
			}
		},

	}
</script>
<style lang="scss">
	page {
		background-color: #F0F0F0;
		padding-bottom: 50upx;
	}

	.u-grid {
		border-radius: 20px;
	}


	.headBox {
		.navigationBarTitleText {
			text-align: center;
			padding: 20upx;
			font-weight: 500;
			font-size: 30upx;
		}

		.swiper {
			position: relative;
			top: -70upx;
		}


		.navBox {
			background: #fff;
			padding: 20upx;
			margin: 0 30upx;
			margin-top: 20upx;
			margin-bottom: 20upx;
			border-radius: 20upx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;


			.navItems {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				padding: 20upx 0;

				.navName {
					color: #fff;
					font-size: 34upx;
					font-weight: bold;
					letter-spacing: 5upx;
					margin-left: 5upx;
					color: black;
				}
			}

			.navItems:not(:nth-child(2n)) {
				border-right: 1px dashed rgba(0, 0, 0, 0.2);
			}

			.navItems:nth-child(n+3) {
				border-top: 1px dashed rgba(0, 0, 0, 0.2);
			}
		}



		.isLogin {
			margin-top: 20upx !important;
		}

		.info {
			margin: 20upx 30upx !important;
			margin-top: -70upx !important;
		}

		.two {
			margin: 20upx 30upx !important;
		}

		.my-info {
			display: flex;
			margin: 20upx 30upx;

			border-radius: 20upx;
			background-color: #fff;
			padding: 40upx 10upx;
			text-align: center;
			justify-content: space-between;

			.headImg {
				width: 15%;
				height: 100upx;
				border-radius: 50%;
				border: 1px solid #ebebeb;
				padding: 20upx;
				background-color: #ebebeb;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.userinfo {
				text-align: center;
				line-height: 47upx;
			}

			.storeinfo {
				text-align: center;
				display: flex;
				justify-content: space-between;

				.storeItem {
					margin: 0 15upx;
					line-height: 47upx;

					.itemnum {
						font-size: 35upx;
						font-weight: bold;
					}
				}
			}

			.memberinfo {}

			.headName {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				margin-left: 20upx;
				width: 80%;

				.headLogn {
					text-align: left;
					font-size: 40upx;
					font-weight: bold;
				}

				.headSign-in {
					display: flex;
					justify-content: space-between;
				}
			}
		}

		.funBox {
			margin: 0 30upx;
			margin-bottom: 20upx;
			border-radius: 20upx;

			background-color: #fff;

			.custom-grid {
				border-radius: 20upx !important;
			}

			.grid-text {
				margin-top: 10upx;
				font-size: 28upx;
			}
		}

		.mineBox {
			margin: 0 30upx;
			// margin-bottom: 8upx;
			background-color: #fff;
			border-radius: 10upx;
			display: flex;
			justify-content: space-around;

			.leftBox {
				width: 50%;
				margin: 5upx;

				.upperLeft {
					display: flex;
					height: 155upx;
					margin-bottom: 5upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}

				.leftLower {
					height: 155upx;
					margin-top: 5upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}
			}

			.rightBox {
				margin: 5upx;
				width: 50%;

				.imgSwiper {
					height: 100%;

					.imgSwiperItem {
						.imgs {
							background-size: 100% 100%;
							height: 100%;
							border-radius: 8upx;
						}
					}
				}
			}
		}
	}

	.contentBox {
		margin: 0 30upx;

		.cardBox {
			margin: 20upx 0;
			width: 100%;
			height: 350upx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 8rpx;

			.swiper {
				align-items: center;
				height: 60px;
				padding: 0 20upx;
				padding-top: 20upx;
				width: 35%;
				margin-left: auto;

				.swiperItem {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-right: 20upx;

					.itemView {
						display: flex;
						justify-content: space-between;
						padding: 10upx 30upx;
						background-color: rgba(0, 0, 0, 0.5);
						border-radius: 50upx;
						color: #fff;
					}
				}
			}
		}

	}
</style>